<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>
    <text class="tips-text">登录后尽享更多权益</text>
  </view>
</template>

<script>
import {mapMutations, mapActions} from 'vuex'
export default {
  name: 'MyLogin', // 添加组件名
  data() {
    return {
      
    }
  },
  methods: {
    ...mapMutations('m_user', ['updateUserInfo', 'updateLoginStatus']),
    getUserProfile() {
      uni.getUserProfile({
        desc: '用于登录并获取您的基本信息',
        success: (res) => {
          console.log(res)
          
          this.updateUserInfo(res.userInfo);
          console.log('授权成功，用户信息：', res.userInfo);
          this.getToken(res);
        },
        fail: (err) => {
          if (err.errMsg.includes('auth deny')) {
            uni.$showMsg('您取消了登录授权！')
          }
        }
      })
    },
    // async getToken(info) {
    //   try {
    //     // 1. 获取登录凭证
    //     const [err, res1] = await uni.login().catch(err => err)
    //     if(err || res1.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')
        
    //     console.log('真机登录成功，用户信息:', info.userInfo)
        
    //     // 2. 尝试调用云函数（带错误降级）
    //     let cloudSuccess = false
    //     try {
    //       const query = {
    //         code: res1.code,
    //         encryptedData: info.encryptedData,
    //         iv: info.iv,
    //         rawData: info.rawData,
    //         signature: info.signature,
    //         userInfo: info.userInfo
    //       }
          
    //       console.log('尝试调用云函数...')
    //       const cloudRes = await uniCloud.callFunction({
    //         name: "myCloudSp",
    //         data: { query }
    //       })
          
    //       if (cloudRes.result.code === 200) {
    //         cloudSuccess = true
    //         console.log('云函数调用成功，数据已保存')
    //       }
    //     } catch (cloudErr) {
    //       console.warn('云函数调用失败，使用本地模式:', cloudErr)
    //       // 云函数失败不影响主要功能
    //     }
        
    //     // 3. 完成登录流程
    //     uni.setStorageSync('hasLogin', true)
    //     uni.setStorageSync('userInfo', info.userInfo)
    //     this.updateUserInfo(info.userInfo)
    //     this.updateLoginStatus(true)
    //     this.$emit('loginSuccess')
        
    //     if (cloudSuccess) {
    //       uni.$showMsg('登录成功!')
    //     } else {
    //       uni.$showMsg('登录成功!（本地模式）')
    //     }
        
    //   } catch (error) {
    //     console.error('登录流程异常:', error)
    //     uni.$showMsg('登录失败')
    //   }
    // }
    async getToken(info) {
      const [err, res1] = await uni.login().catch(err => err)
      if(err || res1.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')
      
      const query = {
        code: res1.code,
        encryptedData: info.encryptedData,
        iv: info.iv,
        rawData: info.rawData,
        signature: info.signature,
        userInfo: info.userInfo
      };
      
      try {
        const cloudRes = await uniCloud.callFunction({
          name: "myCloudSp",
          data: { query }
        });
        // console.log(cloudRes) 
        if (cloudRes.result.code === 200) {
          uni.$showMsg('登录成功!');
          console.log('数据插入成功，记录ID：', cloudRes.result.data);
          
          console.log(info.userInfo)
          this.updateUserInfo(info.userInfo)
          this.updateLoginStatus(true);
          this.$emit('loginSuccess');
        } else {
          uni.$showMsg('数据保存失败：' + cloudRes.result.message);
        }
      } catch (cloudErr) {
        uni.$showMsg('调用云函数失败：' + cloudErr.message);
      }
    }
  
  }
}
</script>

<style lang="scss">
.login-container {
  height: 750rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: ' ';
    display: block;
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
  }
  .tips-text {
    font-size: 14px;
    color: gray;
  }
}
</style>